<template>
  <div id="notificatio-bar-message" ref="notificatio">
    <h1 class="title">极光推送</h1>
    <div class="content_wrap" :style="{height: height}">
      <el-main>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" label-width="100px" class="demo-ruleForm">
          <!-- -------- 推送内容 -------- -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <h2>推送内容</h2>
            </div>
            <div class="content">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="推送平台">
                    <el-select v-model="ruleForm.auPlatform" placeholder="请选择交易类型" filterable clearable>
                      <el-option
                        v-for="item in auPlatformList"
                        :key="item.value"
                        :label="item.value"
                        :value="item.index">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="通知标题" prop="title">
                    <el-input v-model="ruleForm.title" placeholder="请填写通知标题"></el-input>
                  </el-form-item>
                  <el-form-item v-show="ruleForm.platform === 'ios'" label="副标题">
                    <el-input placeholder="请填写副标题，仅支持iOS10以上" v-model="ruleForm.subtitle"></el-input>
                  </el-form-item>
                  <el-form-item label="通知内容" prop="content">
                    <el-input v-model="ruleForm.content" type="textarea" :autosize="{ minRows: 10, maxRows: 10}" placeholder="请填写通知内容，字数在200个字以内"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="2" class="imagebox">
                  <span class="textandroid">{{ this.ruleForm.title }}</span>
                  <span class="textios">{{ this.ruleForm.content }}</span>
                  <div v-if="ruleForm.platform === 'android'" class="image"><img src="../../../../images/mobile-bg.png" alt=""></div>
                  <div v-else class="image"><img src="../../../../images/mobile-ios-bg.png" alt=""></div>
                </el-col>
              </el-row>
              <el-row>
                  <el-button type="primary" size="mini" @click="auroraPush">推送</el-button>
              </el-row>
            </div>
          </el-card>
        </el-form>
      </el-main>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import api from '../../../../api/url'
  import ajax from '../../../../api/ajax/mobilePushAjax'
  export default {
    name: 'notificatio-bar-message',
    data () {
      return {
        auPlatform: '',
        auPlatformList: [
          {
            index: 'android',
            value: 'android'
          },
          {
            index: 'ios',
            value: 'ios'
          },
          {
            index: 'androidandios',
            value: 'androidandios'
          }
        ],
        ruleForm: {
          platform: '',
          title: '', // 通知标题
          content: '', // 通知内容
          subtitle: '', // 副标题
          send_time: 'lj', // 推送时间 yyyy-MM-DD HH:MM:SS
          timer: '', // 选择日期时间
          newtimer: '', // 时间格式化选择日期时间
          mitimer: '', // 选择日期时间
          tent: '', // ios的音效控制
          newdamitimer: '', // 日期时间合成
          date_area: '', // 选择循环日期
          cyclic_time: '', // 选择循环时间
          date_arejg: '', // 循环时间间隔
          cyclic_target: '', // 推送循环目标
          expire_time: '24', // 离线保存
          open: 'yy', // 点击打开
          audience_type: 'all', //
          user: '', // 特定用户
          params: false, // 附件参数
          paramsone: false, // ios的通知
          paramstwo: false, // ios的通知
          isOpenMedia: false, // 是否打开富媒体
          xg_media_resources: '', // 富媒体内容
          ring: '1', // 是否有铃声 0-没有，1-有（默认）
          radio: 'mr', // 默认声音
          showRadio: false, // 点击声音控制声音选择的隐藏显示
          ring_raw: '', // 铃声文件名-不需要后缀
          vibrate: '1', // 是否需要震动 0-没有，1-有（默认）
          lights: '1', // 是否需要呼吸灯 0-不用，1-用（默认）
          multi_pkg: false, // 多包名推送
          useraccount: '', // 账号内容
          usertoken: '', // 单token输入框
          value4: '', // 定时的时间值
          environment: 'product', // 用户指定的推送环境--iOS专用（默认product）
          badge_type: '-1', // 用户设置角标数字 -1：不变 -2：加1 >=0：自定义
          timerone: '', // 时间格式化选择日期时间1
          timertwo: '', // 时间格式化选择日期时间2
          selector: '', // 循环下拉翻译
          userment: '', // 群推单推翻译
          esyuser: '', // 弹框里的推送目标翻译
          darancms: {}, // 推送的参数
          value8: '', // 角标设置参数
          cehold: '', // ios的自定义音效
          expiregory: '' // ios的默认音效
        },
        rules: {
          title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
          content: [{ required: true, message: '请输入通知内容', trigger: 'blur' }]
        },
        height: null
      }
    },
    methods: {
      // 极光推送
      auroraPush () {
        const puthData = {
          platform: this.ruleForm.auPlatform,
          title: this.ruleForm.title,
          content: this.ruleForm.content
        }
         ajax.post(api.AURORA_PUSH, puthData).then(res => {

         })
      }
    },
    created () {
      this.$nextTick(() => {
        this.height = this.$refs.notificatio.offsetHeight - 60 + 'px'
      })
      this.ruleForm.title = this.v3AppTitle
      this.ruleForm.platform = this.v3platform
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #notificatio-bar-message
    height 100%
    background #f5f5f5
    overflow hidden
    .title
      height 60px
      padding 15px
      line-height 30px
      font-size 18px
      font-weight normal
      background #fff
    .content_wrap
      overflow auto
      .box-card
        margin-bottom 10px
      .imagebox
        position relative
        width 260px
        overflow hidden
        word-wrap break-word
        text-overflow ellipsis
        .textandroid
          position absolute
          top 140px
          left 70px
          color #ffff
          font-size 15px
        .textios
          position absolute
          top 165px
          left 70px
          color #ffff
          font-size 12px
        .image
          img
            width 260px
            height 320px
        .h2
          font-size 18px
          font-weight normal
        .content
          background #fff
          .upload-demo
            display inline-block
          .params-input
            width 260px
          i.iconfont
            font-size 14px
            margin-right 10px
            color #D8DCE5
          i.iconfont:hover
            color #016DFB
          .i-span
            margin-left 8px
    .el-input
      max-width 500px
</style>
